<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 响应式示例演示</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      line-height: 1.6;
      color: #333;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }
    
    .card {
      background: white;
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }
    
    .card h2 {
      color: #667eea;
      margin-bottom: 20px;
      font-size: 1.5rem;
      border-bottom: 3px solid #667eea;
      padding-bottom: 10px;
    }
    
    .card h3 {
      color: #764ba2;
      margin: 20px 0 10px;
      font-size: 1.2rem;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #555;
    }
    
    input[type="number"], input[type="text"] {
      width: 100%;
      padding: 10px 15px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
      transition: border-color 0.3s ease;
    }
    
    input[type="number"]:focus, input[type="text"]:focus {
      outline: none;
      border-color: #667eea;
    }
    
    button {
      background: #667eea;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
    button:hover {
      background: #5a5fcc;
    }
    
    button.secondary {
      background: #764ba2;
    }
    
    button.secondary:hover {
      background: #6441a4;
    }
    
    button.danger {
      background: #ff4757;
    }
    
    button.danger:hover {
      background: #ff3838;
    }
    
    .temperature-display {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      padding: 20px;
      border-radius: 10px;
      margin-top: 20px;
      font-size: 1.1rem;
    }
    
    .todo-list {
      list-style: none;
      margin-top: 20px;
    }
    
    .todo-item {
      display: flex;
      align-items: center;
      padding: 12px;
      margin-bottom: 10px;
      background: #f8f9fa;
      border-radius: 8px;
      transition: background 0.3s ease;
    }
    
    .todo-item:hover {
      background: #e9ecef;
    }
    
    .todo-item input[type="checkbox"] {
      margin-right: 12px;
      width: 20px;
      height: 20px;
      accent-color: #667eea;
    }
    
    .todo-item span {
      flex: 1;
    }
    
    .completed {
      text-decoration: line-through;
      color: #888;
    }
    
    .status {
      margin-top: 15px;
      padding: 10px;
      background: #e3f2fd;
      border-radius: 8px;
      font-weight: 600;
      color: #1976d2;
    }
    
    .mouse-position {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      margin-top: 20px;
    }
    
    .mouse-position h4 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }
    
    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <!-- 示例1：温度转换器 -->
      <div class="card">
        <h2>🌡️ 温度转换器</h2>
        <div class="form-group">
          <label for="celsius">摄氏度 (°C):</label>
          <input 
            id="celsius" 
            type="number" 
            v-model.number="celsius"
            placeholder="输入摄氏度"
          >
        </div>
        <div class="form-group">
          <label for="fahrenheit">华氏度 (°F):</label>
          <input 
            id="fahrenheit" 
            type="number" 
            v-model.number="fahrenheit"
            placeholder="输入华氏度"
          >
        </div>
        <div class="temperature-display">
          <p>🌡️ {{ celsius }}°C = {{ fahrenheit.toFixed(2) }}°F</p>
          <p>🌡️ {{ fahrenheit }}°F = {{ (celsiusFromFahrenheit).toFixed(2) }}°C</p>
        </div>
      </div>

      <!-- 示例2：待办列表 -->
      <div class="card">
        <h2>✅ 待办列表</h2>
        <div class="form-group">
          <input 
            type="text" 
            v-model="newTodoTitle" 
            placeholder="添加新任务..."
            @keyup.enter="addTodo"
          >
          <button @click="addTodo">添加任务</button>
        </div>
        
        <ul class="todo-list">
          <li v-for="todo in todoList" :key="todo.id" class="todo-item">
            <input 
              type="checkbox" 
              v-model="todo.completed"
              @change="updateRemaining"
            >
            <span :class="{ completed: todo.completed }">{{ todo.title }}</span>
            <button class="danger" @click="removeTodo(todo.id)">删除</button>
          </li>
        </ul>
        
        <div class="status">
          📝 剩余未完成任务: {{ remainingCount }}
        </div>
      </div>

      <!-- 示例3：鼠标位置监听 -->
      <div class="card">
        <h2>🖱️ 鼠标位置追踪</h2>
        <div class="mouse-position" :style="{ backgroundColor: `rgb(${mouseX % 255}, ${mouseY % 255}, 150)` }">
          <h4>鼠标坐标</h4>
          <p>X: {{ mouseX }}</p>
          <p>Y: {{ mouseY }}</p>
        </div>
        <div style="margin-top: 20px; text-align: center;">
          <button @click="toggleTracking">
            {{ isTracking ? '停止追踪' : '开始追踪' }}
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    const { createApp, ref, computed, reactive, watchEffect } = Vue
    
    createApp({
      setup() {
        // ===== 示例1：温度转换器 =====
        const celsius = ref(25)
        
        // 计算属性：摄氏度转华氏度
        const fahrenheit = computed({
          get: () => (celsius.value * 9/5) + 32,
          set: (value) => {
            celsius.value = (value - 32) * 5/9
          }
        })
        
        // 计算属性：华氏度转摄氏度
        const celsiusFromFahrenheit = computed(() => {
          return (fahrenheit.value - 32) * 5/9
        })

        // ===== 示例2：待办列表 =====
        const todoList = reactive([
          { id: 1, title: '学习Vue 3响应式', completed: false },
          { id: 2, title: '练习组合式API', completed: false },
          { id: 3, title: '掌握TypeScript', completed: true }
        ])
        
        const newTodoTitle = ref('')
        const remainingCount = ref(0)
        
        // 添加任务
        const addTodo = () => {
          if (newTodoTitle.value.trim()) {
            todoList.push({
              id: Date.now(),
              title: newTodoTitle.value.trim(),
              completed: false
            })
            newTodoTitle.value = ''
            updateRemaining()
          }
        }
        
        // 删除任务
        const removeTodo = (id) => {
          const index = todoList.findIndex(todo => todo.id === id)
          if (index > -1) {
            todoList.splice(index, 1)
            updateRemaining()
          }
        }
        
        // 更新剩余任务数
        const updateRemaining = () => {
          remainingCount.value = todoList.filter(todo => !todo.completed).length
        }

        // ===== 示例3：鼠标位置监听 =====
        const mouseX = ref(0)
        const mouseY = ref(0)
        const isTracking = ref(true)
        let stopEffect = null
        
        // 开始追踪
        const startTracking = () => {
          if (stopEffect) return
          
          stopEffect = watchEffect(() => {
            const handleMouseMove = (event) => {
              if (isTracking.value) {
                mouseX.value = event.clientX
                mouseY.value = event.clientY
              }
            }
            
            window.addEventListener('mousemove', handleMouseMove)
            
            return () => {
              window.removeEventListener('mousemove', handleMouseMove)
            }
          })
          
          isTracking.value = true
        }
        
        // 停止追踪
        const stopTracking = () => {
          if (stopEffect) {
            stopEffect()
            stopEffect = null
          }
          isTracking.value = false
        }
        
        // 切换追踪状态
        const toggleTracking = () => {
          if (isTracking.value) {
            stopTracking()
          } else {
            startTracking()
          }
        }
        
        // 初始化
        updateRemaining()
        startTracking()
        
        return {
          // 温度转换器
          celsius,
          fahrenheit,
          celsiusFromFahrenheit,
          
          // 待办列表
          todoList,
          newTodoTitle,
          remainingCount,
          addTodo,
          removeTodo,
          updateRemaining,
          
          // 鼠标位置
          mouseX,
          mouseY,
          isTracking,
          toggleTracking
        }
      }
    }).mount('#app')
  </script>
</body>
</html>